<template>
  <div>
    <el-input v-model="str"></el-input>
    <br>
    <br>
    <br>

    <span>组件继承形式实现</span>
    <TextOverflow :content="str" effect="light" overflow>
      <div class="box">
        {{ str }}
      </div>
    </TextOverflow>
    <br>
    <br>
    <br>

    <span>全局改写形式实现</span>
    <el-tooltip :content="str" overflow>
      <div class="box">
        {{ str }}
      </div>
    </el-tooltip>
    <br>
    <br>
    <br>

    <el-table :data="formData">
      <el-table-column prop="name" label="姓名" width="300px">
        <template v-slot="{row}">
          <el-tooltip :content="row.name" overflow>
            <div class="box">{{ row.name }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="姓名" width="300px"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import TextOverflow from "@/components/text-overflow.vue";

export default {
  name: "demo01",
  components: {TextOverflow},
  data() {
    return {
      str: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。',
      formData: [
        {
          name: '问问吾问',
          age: 24
        }, {
          name: '问问吾问问问吾问问问吾问问问吾问问问吾问问问吾问问问吾问问问吾问',
          age: 24,
        },
      ]
    }
  },
  methods: {
    handleClick() {
    }
  }
}
</script>

<style scoped>
.box {
  width: 300px;
  background: pink;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
